<template>
  <div class="home">
   <button @click="toChange">{{num}} </button>
  <div class="container">
    <MusicItem v-for="item of musics" :key="item.id" :item="item"></MusicItem>
  </div>
  </div>
</template>

<script>

import MusicItem from './components/MusicItem.vue'
import HookCountdown from './hooks/countDown'
import HookMusic from './hooks/music'

export default{
  components: { MusicItem }, 
  name: "Home",
  setup() {
    const countdownState = HookCountdown();
    const musicState = HookMusic();
   return {
      ...countdownState,
      ...musicState
    }
   
    
  },
};
</script>
<style>
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>

